<template>
  <div class="">
    <el-row>
      <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2" style="overflow: hidden;">
        <div style="padding: 10px;">
          <div style="padding: 10px;background: #fff;">
            <el-tree default-expand-all ref="treeRef"
              style="height: calc(100vh - 100px);overflow-y: auto;overflow-x: hidden;" node-key="id" highlight-current
              :current-node-key="currentKey" :data="moduleTree" :expand-on-click-node="false"
              :props="{ label: 'name', value: 'id' }" @node-click="handleNodeClick" />
          </div>
        </div>
      </el-col>
      <el-col :xs="14" :sm="16" :md="18" :lg="20" :xl="22">
           <CarView v-if="tempName === 'car'" />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import CarView from './template/car.vue'
const moduleTree = ref([
  {
    tempname: 'car',
    name: '藻水分离车',
  },
  {
    tempname: 'ship',
    name: '藻水分离船',
  },
  {
    tempname: 'zhang1',
    name: '藻水分离站-1',
  },
  {
    tempname: 'zhang2',
    name: '藻水分离站-2',
  },
  {
    tempname: 'zhang3',
    name: '藻水分离站-3',
  }
])
const tempName = ref(null)
const treeRef = ref(null)
const handleNodeClick = (data: Tree) => {
  tempName.value = data.tempname
}

</script>

<style scoped></style>